﻿.hero {width: 100%; background:#f3f4f6; }

.hero {
	width: 100%;
	height: 350px;
	background-size: cover
}

.hero .container {
	display: table;
	height: 100%;
	box-sizing: border-box
}

.hero .hero-content,.hero .hero-title {
	display: table-cell;
	vertical-align: middle
}

.hero .hero-title {
	font-size: 36px;
	color: #fff;
	line-height: 1.5;
	font-weight:normal; 
}

.hero .hero-title span {
	display: block;font-weight:normal;
}

.hero-index {
	position: relative;
	height:537px;
	background: #f3f4f6;
}

.hero-index .hero-index-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/hero_index.jpg) center center no-repeat;
	z-index: 1
}

.hero-index .container {
	position: relative;
	z-index: 2
}

.hero-index .hero-title {
	display: block;
	color: #000
}

.hero-index .hero-text {
	font-size: 16px;
	line-height: 2;
	color: #333;
	padding: 20px 0 30px;
	word-spacing: 6px
}

.hero-index .btn-primary {
	line-height: 34px
}

/*-- 媒体资源 --*/
.ad-source {
	position: relative;
	height:693px;
	color: #fff;
	background: #4f5257;
}

.ad-source .container {
	height: 100%;
	text-align: right;
	position: relative;
}

.ad-source .container:before {
	width: 0;
	height: 100%;
	display: inline-block;
	content: ' ';
	vertical-align: middle
}

.ad-source .ad-source-light {
	position: absolute;
	right: 50%;
	bottom: 0;
	width: 856px;
	height: 414px;
	margin-right: -150px;
	background: url(../images/overview_light.png) center center no-repeat;
}

.ad-source .ad-source-text {
	text-align: left;
	width: 352px;
	display: inline-block;
	vertical-align: middle
}

.ad-source .ad-source-text h3.title {
	text-align: left;
	color: #fff;
	line-height: 1.5;
	margin-bottom: 20px;
	font-size:36px;
	font-weight: normal;
}

.ad-source .ad-source-text p {
	font-size: 16px;
	line-height: 2;
	margin-bottom: 20px
}

.ad-source .ad-source-text .btn-more-source {
	font-size: 16px;
	color: #fff
}

.ad-source .ad-source-text .btn-more-source:hover {
	opacity: .8
}

.ad-source .ad-source-text .content {
	margin-bottom: 35px
}

.ad-source .ad-source-text .btn {
	line-height: 38px
}

.ad-source .ad-source-list {
	position: absolute;
	/*right: 40%;*/
	left:-73px;
	top: 174px
}

.ad-source .ad-source-list li {
	float: left;
	margin-right: 24px;
	list-style-type: none;
}

.ad-source .ad-source-list li.sina,.ad-source .ad-source-list li.toutiao {
	margin-top: 170px
}

.ad-source .ad-source-list li.qq,.ad-source .ad-source-list li.tx  {
	margin-top: 100px
}

.ad-source .ad-source-list li.sohu,.ad-source .ad-source-list li.uc  {
	margin-top: 50px
}

.ad-source .ad-source-list li.wangyi,.ad-source .ad-source-list li.youku  {
	margin-top: 20px
}

.ad-source .ad-source-list li .icon {
	display: block;
	background-image: url(../images/ico-all.png);
	background-repeat: no-repeat;
	width: 63px;
	height: 63px
}

.ad-source .ad-source-list li .icon.icon-sina{
	background-position: 0 0px
}

.ad-source .ad-source-list li .icon.icon-qq {
	background-position: -63px 0px
}

.ad-source .ad-source-list li .icon.icon-sohu {
	background-position: -126px 0px
}

.ad-source .ad-source-list li .icon.icon-wangyi {
	background-position: -189px 0px
}

.ad-source .ad-source-list li .icon.icon-iqiyi {
	background-position: -252px 0px
}

.ad-source .ad-source-list li .icon.icon-youku {
	background-position: -315px 0px
}
.ad-source .ad-source-list li .icon.icon-uc {
	background-position: -378px 0px
}
.ad-source .ad-source-list li .icon.icon-tx {
	background-position: 0px -63px
}
.ad-source .ad-source-list li .icon.icon-toutiao {
	background-position: -63px -63px
}

.ad-source .ad-source-list li span {
	display: block;
	font-size: 12px;
	color: #dadada;
	text-align: center;
	margin-top: 6px
}

/*-- 广告收费 --*/
.charge {height:812px; background: #f7f9fb;}
.charge .title {font-size:36px; margin-top: 90px; margin-bottom:15px; font-weight:normal; text-align: center; color:#333333;}
.charge .sub-title {font-size:20px; font-weight:normal; text-align: center; color:#333333;}
.charge .list {padding-top: 45px;}
.charge .list .item {float:left; width:230px; cursor: pointer; height:449px; padding-top:46px; padding-left:25px; padding-right:25px; border:1px solid #e7e7e7; margin-left: 10px; background:white; text-align: center;}
.charge .list .item strong {font-size: 28px; font-weight: normal; color:#333333; padding-top:50px; display:block;}
.charge .list .item p {font-size:16px; color:#333333; line-height: 26px; padding-top: 35px;}
.charge .list .item.one {margin-left: 0px;}
.charge .list .item.two {}
.charge .list .item.three {}
.charge .list .item.four {}

.charge .list .item.one i, .charge .list .item.two i, .charge .list .item.three i, .charge .list .item.four i
{
	display:block; 
	background: url(../images/ico-all.png) no-repeat;
	margin:0px auto;
	overflow: hidden;
}
.charge .list .item.one i {background-position:0px -126px ; width:108px; height: 108px; margin-top:5px; margin-bottom:5px;}
.charge .list .item.two i {background-position:-221px -126px; width:107px; height: 118px;}
.charge .list .item.three i {background-position:-108px -126px ; width:113px; height: 108px; margin-top: 5px; margin-bottom:5px;}
.charge .list .item.four i {background-position:-328px -126px ; width:107px; height: 101px;  margin-top:14px; margin-bottom:3px;}

/*--  精准定位 --*/
.pinpoint {height:886px; position:relative;}
.pinpoint .title {font-size:36px; font-weight:normal; color:#333333; text-align: center; margin-top: 69px;}
.pinpoint .container {position: relative;}
.pinpoint .pinpoint-text { }
.pinpoint .pinpoint-text .content {margin-top:78px; margin-bottom:50px; width:330px; color:#333333; line-height: 26px;}
.pinpoint .pinpoint-index-bg {position: absolute; top:175px; right:27px; width:564px; height:286px; background:url(../images/people-title.png) no-repeat;}
.pinpoint .list {margin:110px 0px 0px 0px; padding:0px; list-style-type: none;}
.pinpoint .list .item {float:left; width:196px; height:265px; text-align:center; cursor: pointer; padding:26px 20px 0px 20px; margin-left: 4px;}
.pinpoint .list .item strong {color:white; font-size: 16px; display: block; margin-bottom: 30px; margin-top: 20px;}
.pinpoint .list .item p {font-size: 14px; margin-bottom:5px; color:white;}
.pinpoint .list .item.one {background:#f9ce69; }
.pinpoint .list .item.two {background:#4dcc89; }
.pinpoint .list .item.three {background:#6899e9; }
.pinpoint .list .item.four {background:#55acee; }
.pinpoint .list .item.five {background:#bf8ddc; }

.pinpoint .list .item.one i {display: block; width:46px; height:55px; margin:0px auto;overflow: hidden;  background: url(../images/ico-all.png) no-repeat 0px -244px;}
.pinpoint .list .item.two i {display: block;  margin:3px auto;  width:33px; height:49px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -46px -244px;}
.pinpoint .list .item.three i {display: block;  margin:6px auto 5px;  width:53px; height:44px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -79px -244px;}
.pinpoint .list .item.four i {display: block;  margin:1px auto 0px;  width:45px; height:54px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -133px -244px;}
.pinpoint .list .item.five i {display: block;  margin:2px auto 1px;  width:46px; height:52px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -178px -244px;}
 
/*--  数据优化 --*/
.optimize {height:700px; background:#f7f9fb; }
.optimize .title {font-size:36px; margin-top:90px; margin-bottom:15px; font-weight:normal; text-align: center; color:#333333;}
.optimize .sub-title {font-size:20px; font-weight:normal; text-align: center; color:#333333;}
.optimize .list {padding-top:80px;}
.optimize .list .item {float:left; list-style-type: none; width:312px; text-align: center; margin-left: 132px;}
.optimize .list .item strong {display: block; color:#333333; font-size:26px; padding:45px 0px 30px 0px; font-weight: normal;}
.optimize .list .item p {font-size:16px; line-height: 26px; color:#333333;}
.optimize .list .item.one {margin-left:0px;}
.optimize .list .item.two {}
.optimize .list .item.three{}

.optimize .list .item.one i {display: block; width:137px; height:137px; margin:0px auto; overflow: hidden; background: url(../images/ico-all.png) no-repeat -435px -125px;}
.optimize .list .item.two i {display: block; width:121px; height:121px; margin:9px auto 7px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -572px -125px;}
.optimize .list .item.three i {display: block; width:126px; height:126px; margin:9px auto 9px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -693px -125px;}

/*--  我们的优势 --*/ 
.superior {height:740px;}
.superior .title {font-size:36px; margin-top:90px; margin-bottom:15px; font-weight:normal; text-align: center; color:#333333;}
.superior .sub-title {font-size:20px; font-weight:normal; text-align: center; color:#333333;}
.superior .list {padding-top:80px;}
.superior .list .item {float:left; list-style-type: none; width:312px; text-align: center; margin-left: 132px;}
.superior .list .item strong {display: block; color:#333333; font-size:26px; padding:45px 0px 30px 0px; font-weight: normal;}
.superior .list .item p {font-size:16px; line-height: 26px; color:#333333;}
.superior .list .item.one {margin-left:0px;}
.superior .list .item.two {}
.superior .list .item.three{}

.superior .list .item.one i {display: block; width:125px; height:105px; margin:0px auto; overflow: hidden; background: url(../images/ico-all.png) no-repeat -819px -125px;}
.superior .list .item.two i {display: block; width:115px; height:104px; margin:0px auto 1px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -436px -262px;}
.superior .list .item.three i {display: block; width:120px; height:99px; margin:3px auto 3px; overflow: hidden; background: url(../images/ico-all.png) no-repeat -551px -262px;}

/*-- 投放效果 --*/
.effect {background: #f7f9fb; height: 754px;}
.effect .title {font-size:36px; padding-top:60px; margin-bottom:30px; font-weight:normal; text-align: center; color:#333333;}

.effect .swiper-pagination {text-align: center; width:100%; position: static;}
.effect .swiper-pagination a {outline: 0; -webkit-transition: all .4s ease; transition: all .4s ease; display: inline-block; width:108px; margin-left:35px; height:34px; line-height:34px; text-align:center; color:#6b7686; font-size:14px; border-radius: 15px; border:1px solid #6b7686;}
.effect .swiper-pagination a:hover {color: #fff; border-color: #008de8; background-color: #008de8;}
.effect .swiper-pagination a.one {margin:0px;}
.effect .swiper-pagination a.swiper-pagination-bullet-active {color: #fff; border-color: #008de8; background-color: #008de8;}
.effect .swiper-container .swiper-wrapper {margin-top:40px;}
.effect .swiper-container {
	width: 100%;
	height: 520px; 
	overflow: hidden;
	margin-top: 40px;
}

.effect .swiper-container .swiper-slide {
	position: relative
}

.effect .swiper-container .effect-text {
	width: 480px;
	position: absolute;
	left: 50%;
	margin-left: 40px;
	margin-top: 40px
}

.effect .swiper-container .effect-text .effect-brand {
	color: #999;
	font-size: 18px
}

.effect .swiper-container .effect-text .effect-title {
	font-size: 32px;
	line-height: 1.56;
	color: #000;
	margin: 28px 0;
	font-weight:normal;
}

.docs-source,code {
	font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace
}

.effect .swiper-container .effect-text .effect-title>em {
	color: #008de8;
	font-style: normal
}

.effect .swiper-container .effect-text .effect-description {
	font-size: 16px;
	color: #333;
	line-height: 2;
	margin-bottom: 30px
}

.effect .swiper-container .effect-text .effect-description p:before {
	display: inline-block;
	content: '|';
	margin-right: 8px
}

.effect .swiper-container .effect-text .btn-primary {
	line-height: 36px
}

.effect .swiper-container .effect-pic {
	position: absolute;
	right: 50%;
	margin-right: 40px
}

/*-- 联系方式--*/
.contact {height:356px;}
.contact .title {font-size: 36px; font-weight: normal; color:#333333; margin-bottom: 30px; margin-top:65px; text-align: center;}
.contact .sub-title {font-size:20px; color:#333333; text-align: center; margin-bottom:60px;}
.contact .btn-qq {display: block; margin:0px auto; width:263px; height:60px; background: url(../images/btn-qq.png) no-repeat; border:0px; }

/*-- 第一屏动画 --*/
.hero-index.sec-active .hero-text, .hero-index.sec-active .hero-title,
.pinpoint.sec-active .pinpoint-text .content {
	-webkit-animation: fadeInTop .4s ease-in-out both .5s;
	animation: fadeInTop .4s ease-in-out both .5s
}

.hero-index.sec-active .hero-index-bg, .pinpoint.sec-active .pinpoint-index-bg {
    -webkit-animation: fadeIn .6s linear both;
    animation: fadeIn .6s linear both;
}

.hero-index.sec-active .hero-content .btn,.hero-index.sec-active .phone {
	-webkit-animation: fadeIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both .8s
}

.ad-source.sec-active .ad-source-text .content, .ad-source.sec-active .ad-source-text .title,
.pinpoint.sec-active .content
 {
    -webkit-animation: fadeInTop .4s ease-in-out both;
    animation: fadeInTop .4s ease-in-out both;
}
.ad-source.sec-active .ad-source-text .btn, .pinpoint.sec-active .btn  {
    -webkit-animation: fadeIn .4s ease-in-out both .3s;
    animation: fadeIn .4s ease-in-out both .3s;
}

/*-- 第二屏动画 --*/
.ad-source.sec-active .ad-source-light {
	-webkit-animation: fadeIn .4s ease-in-out both .7s;
	animation: fadeIn .4s ease-in-out both .7s
}

.ad-source.sec-active .ad-source-list ul li:nth-child(1) {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: zoomIn .4s ease-in-out both .8s
}

.ad-source.sec-active .ad-source-list ul li:nth-child(2) {
	-webkit-animation: zoomIn .4s ease-in-out both .9s;
	animation: zoomIn .4s ease-in-out both .9s
}

.ad-source.sec-active .ad-source-list ul li:nth-child(3) {
	-webkit-animation: zoomIn .4s ease-in-out both 1s;
	animation: zoomIn .4s ease-in-out both 1s
}

.ad-source.sec-active .ad-source-list ul li:nth-child(4) {
	-webkit-animation: zoomIn .4s ease-in-out both 1.1s;
	animation: zoomIn .4s ease-in-out both 1.1s
}

.ad-source.sec-active .ad-source-list ul li:nth-child(5) {
	-webkit-animation: zoomIn .4s ease-in-out both 1.2s;
	animation: zoomIn .4s ease-in-out both 1.2s
}

.ad-source.sec-active .ad-source-list ul li:nth-child(6) {
	-webkit-animation: zoomIn .4s ease-in-out both 1.3s;
	animation: zoomIn .4s ease-in-out both 1.3s
}
.ad-source.sec-active .ad-source-list ul li:nth-child(7) {
	-webkit-animation: zoomIn .4s ease-in-out both 1.3s;
	animation: zoomIn .4s ease-in-out both 1.4s
}
.ad-source.sec-active .ad-source-list ul li:nth-child(8) {
	-webkit-animation: zoomIn .4s ease-in-out both 1.3s;
	animation: zoomIn .4s ease-in-out both 1.5s
}
.ad-source.sec-active .ad-source-list ul li:nth-child(9) {
	-webkit-animation: zoomIn .4s ease-in-out both 1.3s;
	animation: zoomIn .4s ease-in-out both 1.6s
}

/*-- 第三屏动画 --*/

.charge.sec-active .list .item.one {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both .7s
}

.charge.sec-active .list .item.two {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both .8s
}

.charge.sec-active .list .item.three {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both .9s
}

.charge.sec-active .list .item.four {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both 1s
} 

/*-- 第四屏动画 --*/

.pinpoint.sec-active .list .item.one {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both .7s
}

.pinpoint.sec-active .list .item.two {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both .8s
}

.pinpoint.sec-active .list .item.three {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both .9s
}

.pinpoint.sec-active .list .item.four {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both 1s
}

.pinpoint.sec-active .list .item.five {
	-webkit-animation: zoomIn .4s ease-in-out both .8s;
	animation: fadeIn .4s ease-in-out both 1.1s
}  

/*-- 第五屏动画 --*/

.optimize.sec-active .list .item.one, .superior.sec-active .list .item.one
{
	-webkit-animation: fadeInTop .3s ease-in-out both .3s;
	animation: fadeInTop .3s ease-in-out both .3s;
}
.optimize.sec-active .list .item.two ,.superior.sec-active .list .item.two
{
	-webkit-animation: fadeInTop .3s ease-in-out both .4s;
	animation: fadeInTop .3s ease-in-out both .4s;
}
.optimize.sec-active .list .item.three,.superior.sec-active .list .item.three
{
			-webkit-animation: fadeInTop .3s ease-in-out both .5s;
	animation: fadeInTop .3s ease-in-out both .5s;
}

/*-- 第六屏动画 --*/


/*-- 第七屏动画 --*/
